<template>
  <div class="data-source-container">
    <div class="left">
      <div class="left-title">数据表</div>
      <div class="left-select-box">
        <a-select
          v-model="dataSource"
          @change="dataSourceChange"
          placeholder="请选择数据源"
          :disabled="operateTbaleIdArr.length > 0"
          :options="dataSourceOptions"
        >
        </a-select>

        <a-input
          v-model="tableSearch"
          :disabled="dataSource === undefined"
          placeholder="搜索指定数据表"
        />

        <a-icon type="redo" class="icon1" title="刷新" @click="loadDataSourceOptions"/>
        <!-- <a-icon type="search" class="icon2" title="搜索"/> -->
      </div>

      <div class="table-list">
        <template v-for="(item, index) in tableArr">
          <div
            :class="[
              'table-item',
              { active: operateTbaleIdArr.indexOf(item.id) > -1 },
            ]"
            :key="index"
            :title="item.tableComment === '' ? item.tableName : item.tableName + '(' + item.tableComment + ')'"
            v-if="item.tableName.indexOf(tableSearch) > -1"
            @click="tableListSelect(item)"
          >
            <p>{{ item.tableName }} <span v-if="item.tableComment!==''">({{item.tableComment}})</span></p>
          </div>
        </template>
      </div>
    </div>
    <div class="right">
      <div class="operate-box" @mousemove="operateBoxMousemove">
        <div class="operate-main">
          <div class="operate-item" v-for="(item,index) in opretaTbaleArr" :key="index" :style="{'marginTop': index * 50 + 'px'}">
            <div
              class="item-title"
              :title="item.tableName"
              @mousedown.stop="e => tableMousedown(e, index)"
              @mouseup.stop="e => tableMouseup(e, index)"
            >
              {{item.tableName}} <span v-if="item.tableComment!==null && item.tableComment!==''">({{item.tableComment}})</span>
            </div>
            <div class="column-box">
              <div class="column-item">
                <a-checkbox v-model="item.checkALLFlag" @change="columnCheckAll(index)"></a-checkbox>
                <span>*</span>
              </div>
              <div class="column-item" v-for="(item1,index1) in item.columnIds" :key="index1">
                <a-checkbox v-model="item1.checkFlag" @change="columnCheck(index, index1)"></a-checkbox>
                <span>{{item1.columnName}}{{ item1.columnComment != null && item1.columnComment != '' ? ('(' + item1.columnComment + ')') : '' }}</span>
              </div>
            </div>
            <a-icon type="close" class="close-icon" @click="deleteTable(index)"/>
          </div>
        </div>
			</div>

      <div class="info-box" v-if="dataSource !== undefined">
				<span>数据库类型:</span>{{dataSourceType}}
				<span>数据源地址:</span>{{dataSourceUrl}}
			</div>
    </div>

    <SetTableLinkDialog
      ref="setTableLinkDialog"
      v-if="dialogFlag"
      @save="dialogSave"
      @cancel="dialogCancel"
      @delete="dialogDelete"
    />
  </div>
</template>

<script>
import $ from 'jquery'
window.$ = $
import SetTableLinkDialog from './SetTableLinkDialog'
export default {
  name: 'CreateIndexByDataSource',
  components: { SetTableLinkDialog },
  data() {
    return {
      dataSourceOptions: [],
      dataSource: undefined,
      tableSearch: '',
      dataSourceName: '',
      dataSourceType: '',
      dataSourceUrl: '',
      searchFlag: false,
      tableArr: [],
      opretaTbaleArr: [
        // {
        //   tableName: 'onl_auth_data',
        //   checkALLFlag: false,
        //   columnIds: [
        //     {
        //       columnName: 'id',
        //       checkFlag: false
        //     },
        //     {
        //       columnName: 'role_id',
        //       checkFlag: false
        //     },
        //     {
        //       columnName: 'auth_id',
        //       checkFlag: false
        //     },
        //     {
        //       columnName: 'type',
        //       checkFlag: false
        //     },
        //     {
        //       columnName: 'cgform_id',
        //       checkFlag: false
        //     }
        //   ]
        // }
      ],
      operateTbaleIdArr: [],
      // 连线开始的table数组下标
      startTableIndex: -1,
      // 连线结束的table数组下标
      endTableIndex: -1,
      // 虚线连线的起点
      startPoint: null,
      // 虚线连线的重点
      endPoint: null,
      scrollFlag: false,
      dialogFlag: false
    }
  },
  mounted() {
    this.loadDataSourceOptions()

    $('body').on('mouseup', e => {
      // 非table头部松开鼠标，重置连续各对象
      if (this.startTableIndex !== -1 && this.endTableIndex !== -1) return
      this.resetLineData()
      $('.data-source-dashed-line').remove()
    })

    $('body').on('mousemove', e => {
      if (this.startTableIndex !== -1 && this.endTableIndex === -1) {
        const { pageX, pageY } = e
        this.endPoint = {
          pageX,
          pageY
        }

        const lineLength = this.calcLine(this.startPoint, this.endPoint)
        const angle = this.getAngle(
          this.startPoint.pageX,
          this.startPoint.pageY,
          this.endPoint.pageX,
          this.endPoint.pageY
        )

        // 长度减去2像素防止虚线遮挡table头部鼠标响应事件
        const lineHtmlStr = `<div class="data-source-dashed-line" style="position:absolute;border-top: 1px dashed red;width:${lineLength - 2}px;top:${this.startPoint.pageY}px;left:${this.startPoint.pageX}px;transform:rotate(${angle}deg);transform-origin: 0 50%;z-index: 10000;"></div>`
        $('.data-source-dashed-line').remove()
        $('body').append(lineHtmlStr)
      }
    })
  },
  beforeDestroy() {
    $('body').off('mouseup mousemove')
  },
  methods: {
    // 加载数据源下拉项
    loadDataSourceOptions() {
      this.dataSourceOptions = []
      this.$get('/sys/dataSource/list?pageNo=1&pageSize=1000').then(res => {
        res.result.records.map(item => {
          if (item.dbStatus === '1') {
            item.value = item.code
            item.title = item.name
            this.dataSourceOptions.push(item)
          }
        })

        if (this.dataSourceOptions.length === 0) {
          this.$message.warning(`数据源列表为空，请先行维护`)
        } else {
          // 默认选中第一个数据源
          if (this.dataSource === undefined) {
            this.dataSource = this.dataSourceOptions[0].value
            this.dataSourceChange(this.dataSourceOptions[0].value, {
              data: {
                props: this.dataSourceOptions[0]
              }
            })
          }
        }
      })
    },
    // 切换数据源
    dataSourceChange(value, options) {
      this.tableSearch = ''
      this.dataSourceName = options.data.props.name
      this.dataSourceType = options.data.props.dbType_dictText
      this.dataSourceUrl = options.data.props.dbUrl
      this.$get(`/index/config/listTables?code=${value}`).then(res => {
        this.tableArr = res.result
      })
    },
    // 选择数据表
    tableListSelect(table) {
      this.$get(`/index/config/getColumns?tableId=${table.id}`).then(res => {
        if (res.result.length === 0) {
          this.$message.warning(`${table.tableName}表字段信息为空，不允许操作`)
          return
        }
        // 判读列表中的数据表是否已选中
        const { tableName, id, tableComment } = table
        if (this.operateTbaleIdArr.indexOf(id) === -1) {
          this.operateTbaleIdArr.push(id)

          const obj = {
            id,
            tableName,
            tableComment,
            checkALLFlag: false,
            columnIds: [],
            relTable: []
          }
          res.result.map(item => {
            item.checkFlag = false
            obj.columnIds.push(item)
          })
          this.opretaTbaleArr.push(obj)
        }
      })
    },
    // 表字段勾选
    columnCheck(index, index1) {
      const table = this.opretaTbaleArr[index]

      // 判断是否需要修改全选状态
      if (table.checkALLFlag) {
        if (!table.columnIds[index1].checkFlag) table.checkALLFlag = false
      } else {
        let flag = true
        table.columnIds.map(item => {
          flag = flag && item.checkFlag
        })

        if (flag) table.checkALLFlag = true
      }
    },
    // 表字段全选
    columnCheckAll(index) {
      const table = this.opretaTbaleArr[index]
      table.columnIds.map(item => {
        item.checkFlag = table.checkALLFlag
      })
    },
    // 删除右侧操作表
    deleteTable(index) {
      const deleteTable = this.opretaTbaleArr[index]

      deleteTable.relTable.map(rel => {
        // $(`.table-line1.${deleteTable.tableName}.${rel.relTable}`).remove()
        // $(`.table-line2.${deleteTable.tableName}.${rel.relTable}`).remove()
        this.opretaTbaleArr.map(table => {
          const relIndex = table.relTable.findIndex(rel => rel.id === deleteTable.id)
          if (relIndex !== -1) table.relTable.splice(relIndex, 1)
        })
      })

      this.operateTbaleIdArr.splice(this.operateTbaleIdArr.indexOf(deleteTable.id), 1)
      this.opretaTbaleArr.splice(index, 1)

      this.$nextTick(() => {
        this.recoveryAllLine()
      })
    },
    // 表格头部按下鼠标
    tableMousedown(e, index) {
      console.log('>>>>>>tableMousedown', index)
      this.startTableIndex = index
      const { pageX, pageY } = e
      this.startPoint = {
        pageX,
        pageY
      }
    },
    // 表格头部鼠标松开
    tableMouseup(e, index) {
      $('.data-source-dashed-line').remove()
      console.log('>>>>>>tableMouseup', this.startTableIndex)
      if (this.startTableIndex !== -1 && this.startTableIndex !== index) {
        this.endTableIndex = index

        if (this.startTableIndex > this.endTableIndex) {
          const temp = this.startTableIndex
          this.startTableIndex = this.endTableIndex
          this.endTableIndex = temp
        }

        const startTable = this.opretaTbaleArr[this.startTableIndex]
        const endTable = this.opretaTbaleArr[this.endTableIndex]

        // 防止重复连线
        const tempIndex = startTable.relTable.findIndex(item => item.id === endTable.id)
        if (tempIndex !== -1) {
          this.$message.warning(`${startTable.tableName}表和${endTable.tableName}表已有关联关系`)
        } else {
          this.dialogFlag = true
          this.$nextTick(() => {
            this.$refs.setTableLinkDialog.show({
              type: 'add',
              startTable,
              endTable
            })
            console.log(this.startTableIndex, this.endTableIndex)
          })
        }
      } else {
        this.resetLineData()
      }
    },
    // 操作区域监听鼠标位置，实现鼠标在两侧时自动滚动
    operateBoxMousemove(e) {
      if (this.startTableIndex !== -1 && this.endTableIndex === -1) {
        const { pageX } = e
        const scrollLeft = $('.data-source-container .operate-box').scrollLeft()

        // 鼠标在右侧的情况
        if ($(window).width() - pageX < 50) {
          console.log('右侧触发区域')
          if (!this.scrollFlag) {
            this.scrollFlag = true
            $('.data-source-container .operate-box').animate({ scrollLeft: (scrollLeft + 230) + 'x' }, 300)
            setTimeout(() => {
              this.scrollFlag = false
            }, 1000)
          }
        }

        // 鼠标在左侧的情况
        if (pageX < 325) {
          console.log('左侧触发区域')
          if (!this.scrollFlag) {
            this.scrollFlag = true
            $('.data-source-container .operate-box').animate({ scrollLeft: (scrollLeft - 230) + 'x' }, 300)
            setTimeout(() => {
              this.scrollFlag = false
            }, 1000)
          }
        }
      }
    },
    // 计算角度
    getAngle(x1, y1, x2, y2) {
      // 获得人物中心和鼠标坐标连线，与y轴正半轴之间的夹角
      var x = x1 - x2
      var y = y1 - y2
      var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2))
      var cos = y / z
      var radina = Math.acos(cos) // 用反三角函数求弧度
      var angle = 180 / (Math.PI / radina) // 将弧度转换成角度
      if (x2 > x1 && y2 === y1) {
        // 在x轴正方向上
        angle = 0
      }
      if (x2 > x1 && y2 < y1) {
        // 在第一象限;
        angle = angle - 90
      }
      if (x2 === x1 && y1 > y2) {
        // 在y轴正方向上
        angle = -90
      }
      if (x2 < x1 && y2 < y1) {
        // 在第二象限
        angle = 270 - angle
      }
      if (x2 < x1 && y2 === y1) {
        // 在x轴负方向
        angle = 180
      }
      if (x2 < x1 && y2 > y1) {
        // 在第三象限
        angle = 270 - angle
      }
      if (x2 === x1 && y2 > y1) {
        // 在y轴负方向上
        angle = 90
      }
      if (x2 > x1 && y2 > y1) {
        // 在四象限
        angle = angle - 90
      }
      return angle
    },
    // 计算连线长度
    calcLine(firstPoint, secondPoint) {
      // 计算出两个点之间的距离
      const line = Math.sqrt(
        Math.pow(firstPoint.pageX - secondPoint.pageX, 2) + Math.pow(firstPoint.pageY - secondPoint.pageY, 2)
      )
      return line
    },
    // 绘制table连线
    drawJoinLine({ startTable, endTable, relType }) {
      if (this.startTableIndex === -1 || this.endTableIndex === -1) return
      const startDom = $('.data-source-container .operate-item')[this.startTableIndex]
      const endDom = $('.data-source-container .operate-item')[this.endTableIndex]
      // const className = startTable.tableName + '-' + endTable.tableName + '-'
      // 为了连续方便响应hover,暂定连续宽度为5px
      const line1L = startDom.offsetLeft + startDom.offsetWidth
      const line1Sum = $(`.table-line1.${startTable.tableName}`).length
      const tempNum1 = line1Sum > 4 ? 25 : (line1Sum + 1) * 5
      const line1T = startDom.offsetTop + tempNum1 - 2.5
      const line2Sum = $(`.table-line2.${endTable.tableName}`).length
      const tempNum2 = line2Sum > 7 ? 160 : (line2Sum + 1) * 20
      const line2L = endDom.offsetLeft + tempNum2 - 2.5
      const line2T = line1T + 2.5
      const line1W = line2L - line1L + 2.5
      const line2H = endDom.offsetTop - line1T - 2.5
      // offsetLeft offsetTop offsetWidth
      const line1DomStr = `<div class="table-line1 ${startTable.tableName} ${endTable.tableName}" style="left:${line1L}px;top:${line1T}px;width:${line1W}px"></div>`
      const line2DomStr = `<div class="table-line2 ${startTable.tableName} ${endTable.tableName}" style="left:${line2L}px;top:${line2T}px;height:${line2H}px"><div class="table-icon icon${relType}"></div></div>`
      $('.data-source-container .operate-main').append(line1DomStr)
      $('.data-source-container .operate-main').append(line2DomStr)

      // $('.table-line1, .table-line2').hover(function() {
      //   $('.table-line1').removeClass('active')
      //   $('.table-line2').removeClass('active')

      //   const tempArr = $(this).attr('class').split(' ')
      //   if (tempArr.length >= 3) {
      //     const classStr = `.${tempArr[1]}.${tempArr[2]}`
      //     $('.table-line1' + classStr).addClass('active')
      //     $('.table-line2' + classStr).addClass('active')
      //   }
      // }, function() {
      //   $('.table-line1').removeClass('active')
      //   $('.table-line2').removeClass('active')
      // })
      this.linkIconClick()
      this.resetLineData()
    },
    // 恢复所有的连线
    recoveryAllLine() {
      // 删除所有连线和关联关系
      $(`.table-line1`).remove()
      $(`.table-line2`).remove()

      this.opretaTbaleArr.map((table, index) => {
        table.relTable.map(ref => {
          if (ref.start) {
            this.startTableIndex = index
            this.endTableIndex = this.opretaTbaleArr.findIndex(item => item.id === ref.id)
            const startTable = this.opretaTbaleArr[this.startTableIndex]
            const endTable = this.opretaTbaleArr[this.endTableIndex]
            this.drawJoinLine({
              startTable,
              endTable,
              relType: ref.relType
            })
          }
        })
      })
    },
    // 重置绘制数据
    resetLineData() {
      this.startTableIndex = -1
      this.endTableIndex = -1
    },
    // 弹窗返回保存数据
    dialogSave({ type, startTable, endTable, relType, relInfo }) {
      if (type === 'add') {
        this.drawJoinLine({
          startTable,
          endTable,
          relType
        })

        // 添加完dom后处理数据
        startTable.relTable.push({
          relInfo,
          relTable: endTable.tableName,
          id: endTable.id,
          relType,
          // 是否是连线开始的表
          start: true
        })

        // 连续结束表不需要存储关联信息
        endTable.relTable.push({
          relTable: startTable.tableName,
          id: startTable.id,
          // 是否是连线开始的表
          start: false
        })
        this.$message.success(`${startTable.tableName}表和${endTable.tableName}表创建关联关系成功`)
      } else if (type === 'edit') {
        const relTable = startTable.relTable.find(item => item.relTable === endTable.tableName)

        if (relTable === undefined) return

        relTable.relType = relType
        relTable.relInfo = relInfo

        $(`.table-line2.${startTable.tableName}.${endTable.tableName}`).empty()

        $(`.table-line2.${startTable.tableName}.${endTable.tableName}`).append(`<div class="table-icon icon${relType}"></div>`)

        this.linkIconClick()

        this.$message.success(`${startTable.tableName}表和${endTable.tableName}表修改关联关系成功`)
      }

      this.dialogFlag = false
    },
    dialogCancel() {
      this.resetLineData()
      this.dialogFlag = false
    },
    dialogDelete({ startTable, endTable }) {
      const index1 = startTable.relTable.find(item => item.relTable === endTable.tableName)
      if (index1 !== -1) startTable.relTable.splice(index1, 1)

      const index2 = endTable.relTable.find(item => item.relTable === startTable.tableName)
      if (index2 !== -1) endTable.relTable.splice(index2, 1)

      this.recoveryAllLine()

      this.$message.success(`${startTable.tableName}表和${endTable.tableName}表删除关联关系成功`)

      this.dialogFlag = false
    },
    // 连线上关联图标点击事件
    linkIconClick() {
      const that = this
      $('.data-source-container .table-icon').click(function() {
        const tempArr = $(this).parent().attr('class').split(' ')
        if (tempArr.length >= 3) {
          const startTable = that.opretaTbaleArr.find(item => item.tableName === tempArr[1])
          const endTable = that.opretaTbaleArr.find(item => item.tableName === tempArr[2])

          if (startTable === undefined || endTable === undefined) return

          const relTable = startTable.relTable.find(item => item.relTable === endTable.tableName)

          if (relTable === undefined) return

          const { relInfo, relType } = relTable

          that.dialogFlag = true
          that.$nextTick(() => {
            that.$refs.setTableLinkDialog.show({
              type: 'edit',
              startTable,
              endTable,
              relInfo,
              relType
            })
          })
        }
      })
    },
    // 检查操作表关联关系
    checkOpretaTbale() {
      if (this.opretaTbaleArr.length === 0) {
        this.$message.warning(`请至少选择一个数据表`)
        return
      }

      const table = this.opretaTbaleArr.find(item => item.relTable.length === 0)

      // 判断是否存在未关联的操作表
      if (table !== undefined && this.opretaTbaleArr.length !== 1) {
        this.$message.warning(`${table.tableName}表请增加关联关系或者移除`)
        return
      }

      // 所有操作表加起来至少勾选一个操作字段
      let sum = 0
      this.opretaTbaleArr.map(item => {
        item.columnIds.map(column => {
          if (column.checkFlag) sum++
        })
      })

      if (sum === 0) {
        this.$message.warning(`所有数据表需要至少勾选一个表字段`)
        return
      }

      // 生成列表数据
      const indexArr = []
      const tableDataList = []
      this.opretaTbaleArr.map((item, index) => {
        const obj = {
          columnIds: [],
          relTable: [],
          sortNum: index,
          tableName: item.tableName
        }
        item.columnIds.map(column => {
          if (column.checkFlag) {
            obj.columnIds.push(column.id)

            column.dataSource = this.dataSource
            column.dataSourceName = this.dataSourceName
            column.columnId = column.id
            column.dataType = column.columnType
            // 聚合方式默认求平均
            column.groupType = 'avg'
            // 是否是值率，为了方便使用组件用布尔值，提交时转变为0和1
            column.isPercent = false
            column.labels = ''
            // 指标名称默认为字段名称
            column.name = column.columnName
            // 指标备注默认为字段描述
            column.remark = column.columnComment
            column.isDate = 0
            column.dimensionType = undefined
            column.dimensionTypeTime = undefined
            column.tableColumn = column.columnName
            column.tableName = item.tableName
            column.unit = ''
            // 指标还是维度，0指标，1维度
            column.type = 0
            indexArr.push(column)
          }
        })

        item.relTable.map(table => {
          if (table.start) {
            obj.relTable.push({
              relInfo: table.relInfo,
              relTable: table.relTable,
              relType: table.relType
            })
          }
        })

        tableDataList.push(obj)
      })

      this.$emit('ok', {
        indexArr,
        dataSource: this.dataSource,
        tableDataList
      })
    }
  }
}
</script>
<style lang="less" scoped>
.data-source-container {
  height: calc(100%);
  display: flex;
  justify-content: center;
  user-select: none;

  & > .left {
    width: 250px;
    height: 100%;
    background: #fafafa;
    border-bottom: 4px solid #ffffff;

    & > .left-title {
      height: 36px;
      line-height: 36px;
      font-size: 15px;
      color: #000022;
      text-align: center;
      background-color: #eff4f9;
    }

    & > .left-select-box {
      position: relative;
      padding: 10px;
      border-bottom: 4px solid #ffffff;

      .ant-select {
        width: 200px;
        margin-bottom: 10px;
      }

      & > .ant-input {
        width: 200px;
      }

      .icon1 {
        position: absolute;
        width: 20px;
        height: 32px;
        font-size: 20px;
        top: 10px;
        right: 10px;
        cursor: pointer;
        line-height: 35px;
      }

      .icon2 {
        position: absolute;
        width: 20px;
        height: 32px;
        font-size: 22px;
        top: 53px;
        right: 10px;
        cursor: pointer;
        line-height: 35px;
      }
    }

    & > .table-list {
      height: calc(100% - 138px);
      overflow-x: hidden;
      overflow-y: auto;
      padding: 10px 0;

      .table-item {
        cursor: pointer;

        & > p {
          height: 36px;
          line-height: 36px;
          padding: 0 10px;
          margin-bottom: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          border-bottom: 1px dashed #e8e8e8;
        }

        &:hover,
        &.active {
          background-color: #eff4f9;
        }
      }
    }
  }

  & > .right {
    flex: 1;
		width: calc(100% - 275px);
    height: 100%;
    margin-left: 15px;
    background: #fafafa;
    overflow: hidden;
    position: relative;

		&>.operate-box {
      width: 100%;
			height: calc(100% - 40px);
			border-bottom: 4px solid #ffffff;
      overflow: auto;

      &>.operate-main {
        float: left;
        white-space: nowrap;
        padding: 20px;
        position: relative;

        &>.operate-item {
          width: 180px;
          border-radius: 5px;
          border: 1px solid #8bc2e5;
          margin-right: 50px;
          overflow: hidden;
          display: inline-block;
          vertical-align: top;
          position: relative;

          &>.item-title {
            height: 30px;
            line-height: 30px;
            position: relative;
            background-color: #3783c0;
            // text-align: center;
            color: #ffffff;
            padding: 0 30px 0 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          &>.column-box {
            background-color: #ffffff;
            padding: 8px 10px;

            &>.column-item {
              height: 24px;
              line-height: 24px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              &>span {
                margin-left: 6px;

              }
            }
          }

          &>.close-icon {
            position: absolute;
            width: 20px;
            height: 30px;
            font-size: 16px;
            top: 0;
            right: 2px;
            cursor: pointer;
            line-height: 36px;
            color: #ffffff;
          }
        }
      }
		}

		&>.info-box {
			height: 40px;
			line-height: 40px;
			clear: both;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			&>span {
				margin: 0 10px;
				font-weight: bold;
			}
		}
  }
}
</style>

<style lang="less">
.data-source-container {
  .table-line1 {
    position: absolute;
    height: 5px;
    cursor: pointer;

    &::before {
      position: absolute;
      content: '';
      height: 1px;
      width: 100%;
      left: 0;
      top: 2px;
      background-color: #000000;
    }

    &.active {
      &::before {
        height: 3px;
        top: 1px;
        background-color: #3783c0;
      }
    }
  }

  .table-line2 {
    position: absolute;
    width: 5px;
    cursor: pointer;

    &::before {
      position: absolute;
      content: '';
      height: 100%;
      width: 1px;
      left: 2px;
      top: 0;
      background-color: #000000;
    }

    &.active {
      &::before {
        width: 3px;
        left: 1px;
        background-color: #3783c0;
      }
    }

    &>.table-icon {
      position: absolute;
      cursor: pointer;
      width: 30px;
      height: 30px;
      top: 0;
      left: -12.5px;
      z-index: 100;

      &.icon1 {
        background: url('~@/assets/index/left-link.png') no-repeat center center / 100% 100%;
      }

      &.icon2 {
        background: url('~@/assets/index/right-link.png') no-repeat center center / 100% 100%;
      }

      &.icon3 {
        background: url('~@/assets/index/inside-link.png') no-repeat center center / 100% 100%;
      }

      &.icon4 {
        background: url('~@/assets/index/all-link.png') no-repeat center center / 100% 100%;
      }
    }
  }
}
</style>
